﻿<!doctype html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360度查看</title>
    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/wemark360.js"></script>
    <!-- <script src="js/index.js"></script> -->
    <link rel="stylesheet" href="css/wemark360.css" />
    <!-- <link rel="stylesheet" href="css/index.css"/> -->
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <!-- <script type="text/javascript" src="js/portrait.js"></script> -->
    <script>
        $(document).ready(function(){
            $('img').on('dragstart',function (event) {
                event.preventDefault();
            });
        });
    </script>
    <style type="text/css">
        html,
        body,
        .content,
        .view {
            width: 100%;
            height: 100%;
            margin: 0;
            position: relative;
            font-size: 14px;
            overflow: hidden;
        }

        .img {
            width: 100%;
            height: 100%;
            display: block;
        }

        .content {
            position: relative;
        }

        .view-3d {
            flex: auto;
            height: calc(100% - 4em);
        }

        .view-header {
            position: absolute;
            top: 1em;
            z-index: 10000;
            padding: 0em 2em;
            text-align: center;
            width: 100%;
        }

        .view-header>img {
            width: 7em;
            left: 1em;
            position: absolute;
        }

        .view-title {
            display: inline-block;
            background: #9c9c9c;
            color: #fff;
            padding: .5em 1em;
            /* top: -0.5em; */
            margin-right: -.5em;
            transform: skewX(20deg);
            font-size: .815em;
            position: relative;
        }

        @media only screen and (max-width:568px) {
            .view-header {
                padding: 0 1em;
            }

            .view-header>img {
                width: 5em;
            }

            .view-title {
                font-size: 8px;
                padding: .5em;
            }
        }

        .view-title:nth-child(3) {
            color: #333;
            background: #fff;
        }
        .view-title span{
            transform: skewX(-20deg);
            display: inline-block;
        }
        .view-title.active{
            position: relative;
            background: #167dbe;
        }
        .view-header .view-title:nth-child(2).active:after{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            right: -2px;
            top: 30%;
            border-width: 5px;
            border-style: solid;
            transform: skewX(-20deg);
            border-color: transparent transparent transparent #fff;
        }
        .view-header .view-title:nth-child(4).active::after{
            content: '';
            position: absolute;
            width: 0;
            height: 0;
            left: -2px;
            top: 33%;
            border-width: 5px;
            border-style: solid;
            transform: skewX(-20deg);
            border-color: transparent #fff transparent transparent;
        }
        .btnlist {
            display: flex;
            height: 4em;
            overflow: hidden;
            align-items: center;
            justify-content: center;
        }

        .btn {
            width: 1.5em;
            height: 1.5em;
            margin-right: .5em;
            border-radius: 50%;
        }

        .a {
            padding: .5em 2.2em;
            color: #fff;
            font-size: .892em;
            margin-right: .5em;
            text-decoration: none;
            background: #167dbe;
        }

        .video {
            position: absolute;
            top: 0;
            right: 0;
            width: 20%;
            height: 100%;
            z-index: 1000000;
            padding-top: 5em;
            background: #fff;
        }

        .video-logo {
            position: absolute;
            padding: 1.5em 0;
            right: 0;
            top: 0;
            color: #fff;
            font-size: .82em;
            line-height: 2.3em;
            text-align: center;
            width: calc(100% + 1.2em);
        }

        .video-item {
            padding: 0 1em 1em;
            text-align: center;
            line-height: 2em;
        }
        .left{
            position: absolute;
            top: calc(40% - 2em);
            width: 6em;
            height: 6em;
            z-index: 100000;
            left: -5.3em;
        }
        .video-btn {
            position: relative;
            width: 1.5em;
            top: 40%;
            left: calc(100% - 1.5em);
        }

        .video.active {
            right: -25%;
        }

        .video.active .left {
            left: -9em;
        }

        .view-tag {
            text-align: center;
        }

        .view-tag-box {
            width: 13em;
            display: flex;
            margin: 1em auto;
            border: 1px solid #ccc;
			/* margin-left:50%; */
        }

        .view-tag-box img {
            width: 50%;
            height: 1.8em;
        }

        .view-tag-box img:first-child {
            border-right: 1px solid #ccc;
        }

        .video-pay {
            position: fixed;
            width: 100%;
            top: 0;
            left: 0;
            height: 100%;
            box-sizing: border-box;
            z-index: 1000000000;
            background: rgba(0, 0, 0, .6);
        }

        .video-pay video {
            width: 70%;
            height: 60%;
            display: block;
            margin: 12% auto;
            background: #000;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="view">
            <div class="view-3d">
                <div id="container" class="img"></div>
                <div class="view-header">
                    <img src="./img/logo_03.png" alt="">
                    <div class="view-title view-click active" style="width:11em"><span>福特Mustang 2.3T</span> </div>
                    <div class="view-title"><span>市场指导价：￥39.98万-￥40.58万</span></div>
                    <div class="view-title view-click" style="width:11em"><span>福特Mustang V8 GT</span></div>
                    <div class="view-tag">
                        <div class="view-tag-box">
                            <img src="./img/card_03.png" alt="">
                            <img id="img" src="./img/card_05.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
            <div class="btnlist">
                <span class="btn" data-color="huang" style="background: #5b0008"></span>
                <span class="btn" data-color="huang" style="background: #c90411"></span>
                <span class="btn" data-color="huang" style="background: #dc9a00"></span>
                <span class="btn" data-color="huang" style="background: #123178"></span>
                <span class="btn" data-color="huang" style="background: #222524"></span>
                <span class="btn" data-color="huang" style="background: #07060c"></span>
                <span class="btn" data-color="bai" style="background: #818a8e"></span>
                <span class="btn" data-color="bai" style="background: #c5c8c9"></span>
                <span class="btn" data-color="bai" style="background: #9d9d9d"></span>
                <a class="a drive" href="#" >查询经销商</a>
                <a class="a drive" href="#">预约试驾</a>
            </div>
        </div>
        <div class="video active">
            <div class="left">
                <div class="video-btn">
                    <img id="video_img" src="./img/but.png" class="img" alt="">
                </div>
            </div>
            <div class="video-logo">
                <img class="img" style="position: absolute;height: 3.5em;z-index: -1;" src="./img/video_03.png" alt="">
                <span>视频专区</span>
            </div>
            <div class="video-item" data-src="video/1.mp4">
                <span style="font-size:.5em">Make it personal 30s</span>
                <img class="img" src="./img/video-bg.jpg" alt="">
            </div>
            <div class="video-item" data-src="http://fjdysx.com/image/2.mp4">
                <span style="font-size:.5em">中美观 大不同</span>
                <img class="img" src="./img/video-bg2.jpg" alt="">
            </div>
			<div class="video-item" data-src="http://fjdysx.com/image/2.mp4">
                <span style="font-size:.5em">Mustang_Walkaround</span>
                <img class="img" src="./img/video-bg3.jpg" alt="">
            </div>
        </div>
    </div>

    <!--视频-->
 <div class="video-pay" id="pay1" data-key='0' style="display:none;">
    <video id="my-video" controls="controls" src="video/1.mp4" type="video/mp4" -webkit-playsinline playsinline>
    </video>
 </div>
    <script>
		   $("#img").click(function(){
               window.location.href="http://fjdysx.com/3d/";
           }) 
		   $(".drive").click(function(){
             wx.miniProgram.navigateTo({url: '/pages/drive/drive'})
           })
        $(function () {
            var width = document.documentElement.clientWidth;
            var height = document.documentElement.clientHeight;
            var screen_width = width; //屏幕宽度
            var contentDOM = document.getElementsByTagName('body')[0];
            if (width < height) {
                screen_width = height; //如果 是竖屏，灵感的宽度就等于屏高
                contentDOM.style.width = height + 'px';
                contentDOM.style.height = width + 'px';
                contentDOM.style.top = (height - width) / 2 + 'px';
                contentDOM.style.left = 0 - (height - width) / 2 + 'px';
                contentDOM.style.transform = 'rotate(90deg)';
                window.W = height;
                window.H = width;
                // fun(1)
            } else {
                screen_width = height; //如果 是竖屏，灵感的宽度就等于屏高
                contentDOM.style.width = width + 'px';
                contentDOM.style.height = height + 'px';
                contentDOM.style.transform = 'none';
                window.W = width;
                window.H = height;
                // fun()
            }
            //根据手机旋转的角度来判断
            var evt = "onorientationchange" in window ? "orientationchange" : "resize"; //旋转事件
            window.addEventListener(evt, function () { //事件监听 
                location.reload()
            }, false);


            function stopScrolling(e) {
                e.preventDefault();
            }
            document.addEventListener('touchmove', stopScrolling, false)

        })
    </script>
    <script>
        $(function () {
            	document.body.addEventListener('touchmove', function (e) {
	             e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
	}, {passive: false}); //passive 参数不能省略，用来兼容ios和android
	
			
            window.video = document.getElementById('my-video')
            window.video.play();

            $('.video-pay').click(function(e){
                $(this).css('display','none')
                window.video.pause();
            })
            $('#my-video').click(function(e){e.stopPropagation();})
            $('.content').on('click', '.video-item', function (e) {
                    e.stopPropagation();
                    // 视频点击
                    $('.video-pay').css('display','block')
                    window.video.src = $(this).data('src')
                    window.video.load()
                    window.video.play();
                })
                .on('click', '.btn', function () {
                    // 颜色点击
                    
                    localStorage.setItem('imgUrl',$(this).data('color')+'/')
                    location.reload()
                })
                .on('click', '.left', function () {
                    //  视频taggor
                    $('.video').toggleClass('active')
					$("#video_img").attr("scr","");
                })
                .on('clicl', '.view-tag-box img', function () {
                    // 内饰切换
                })
                .on('click','.view-click', function(){
                    $('.view-click').removeClass('active')
                    $(this).addClass('active')
                })
        })
    </script>




</body>

</html>